<template>
    <div id="app">
      <!-- Your content goes here -->
      <transition name="slide">
        <div v-if="showLanding" class="landing-page">
          <div style="position: relative;top: -100px;">
            <img class="logo" style="" src="/src/assets/picture/logo.png" alt="Logo" />
            <p class="tagline" style="color: #8594BF;">———高端工业塑料领导者———<br /> SINCE 2000</p>
            <button @click="startCustomization" style="font-size: 30px;">进入主页</button>
          </div>
        </div>
        <div v-else class="content-page">
          <div>
            <img src="@/assets/picture/main1.png" alt="az">
          </div>

        </div>
      </transition>

    </div>

  </template>
  
  <script>
  export default {
    name: "Homepage",
    data() {
      return {
        showLanding: true, // Controls showing the landing page
      };
    },
    methods: {
      startCustomization() {
        this.showLanding = false; // Trigger the slide transition
      },
    },
  };
  

  </script>
  
  <style scoped>
  #app {
    font-family: Arial, sans-serif;
    text-align: center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  .slide-enter-active, .slide-leave-active {
    transition: transform 0.8s ease;
  }
  .slide-enter {
    transform: translateY(100%);
  }
  .slide-leave-to {
    transform: translateY(-100%);
  }
  
  .landing-page {
    position: absolute;
    width: 100%;
    height: 93%;
    background-image: url('/src/assets/picture/first.gif'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
  
  .overlay {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    padding: 20px;
    border-radius: 8px;
  }
  
  .logo {
    width: 250px;
    margin-bottom: -20px;
  }
  
  .tagline {
    margin-top: 10px;
    font-size: 1.2em;
    line-height: 1.4;
    color: #000;
  }
  
  button {
    background-color: transparent;
    color: rgb(15, 14, 14);
    border: 2px solid white;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  button:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .content-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2em;
  }
  </style>
  